import React, { useState } from 'react'
import { BaseListPage, UdModal, UdModalForm, validators } from '@/lib';
import { Button, Select, Upload } from 'antd';
import ossHttp from '@/utils/oss';

const Option = Select.Option

export default class ExcelTplList extends BaseListPage {
  public types = [
    { value: 'internal-user-account', title: '内部员工' },
    { value: 'delear-area-produts', title: '销售区域与产品维护' },
  ]
  constructor(props) {
    super(props)
    this.state = {
      title: '模板管理',
      queryApi: '',
      rowKey: 'id',
      columns: [],
      leftBtns: [
        <Button type='primary' onClick={this.openModal}>新增</Button>
      ],
      tableProps: {
        rowSelection: null,
      }
    }
  }

  protected query = () => { }

  public openModal = () => {
    UdModal.open({
      title: '新增模板',
      content: <UdModalForm items={[
        {
          id: 'type', label: '类型', rules: [validators.required], render: (
            <Select>
              {this.types.map(({ value, title }) => <Option key={value} value={value}>{title}</Option>)}
            </Select>
          )
        },
        { id: 'file', label: '模板', rules: [validators.required], render: <TplUploadItem /> }
      ]} />,
      onOk: (values) => {
        // const path = 'excel-tpl/' + values.type
        // const file = values.file
        console.log(values)
        /* return ossHttp.put(path, file).then(res => {

        }) */
      }
    })
  }

}

function TplUploadItem(props) {
  const { onChange, value } = props
  const [files, setFiles] = useState([value])
  const fileUpload = (option) => {
    const { file } = option
    const { uid, name } = file
    onChange(file)
    const files = [
      {
        uid,
        name,
        status: 'done',
      }
    ]
    setFiles(files)
  }

  const fileRemove = (e) => {
    setFiles([])
    onChange(undefined)
  }

  return (
    <Upload
      customRequest={fileUpload}
      fileList={files}
      onRemove={fileRemove}
    >
      {(!files || !files.length) ? <Button>上传模板</Button> : null}
    </Upload>
  )
}